<template>
	<view class="order">
		<view class="msglist">
			<view class="title">订单信息</view>
			<view class="list">
				订单号
				<text>{{ datalist.orderNum }}</text>
			</view>
			<view class="list">
				车牌号
				<text>{{ datalist.carNum }}</text>
			</view>
			<view class="list">
				车辆类型
				<text>{{ datalist.carType}}</text>
			</view>
			<view class="list">
				动力类型
				<text>{{ datalist.fuelTypeEnum }}</text>
			</view>
			<view class="list">
				座位数
				<text>{{ datalist.seat }}座</text>
			</view>
			<view class="list">
				使用性质
				<text>{{ datalist.useTypeEnum }}</text>
			</view>
			<view class="list" >
				下单时间
				<text>{{ datalist.gmtTime }}</text>
			</view>
			<view class="list" >
				客户姓名
				<text>{{ datalist.contactName }}</text>
			</view>
			<view class="list" >
				取还车地址
				<text class="golden"  @click="gorouter(datalist.pickCoordinate)">{{ datalist.pickFullAddr }} - {{ datalist.pickAddr }}</text>
				<uni-icons class="map-pin-ellipse"></uni-icons>
			</view>
			<view class="list" >
				取还车距离
				<text class="golden">{{ datalist.distance }} KM</text>
			</view>
			<view class="list" >
				预约时间
				<text>{{ datalist.bookTime }}</text>
			</view>
			
		</view>
		<view class="botton">
			<view class="grab" @click="grab(datalist.id)" v-if="datalist.orderState == 1">抢单</view>
			<view class="grab" @click="navToIndex()" v-if="datalist.orderState != 1">来晚一步，订单已被抢</view>
		</view>
	</view>
	
	
</template>

<script>
import order from '../../servers/order.js';
export default {
	data() {
		return {
			datalist: {},
			id: 0
		};
	},
	async onLoad(e) {
		await this.$onLaunched;
		this.id = e.id;
		this.getdata();
	},
	
	mounted() {},
	methods: {
		getdata() {
			order.orderDetails(this.id).then(res => {
				this.datalist = res.data;
			});
		},
		grab(e) {
			order.grabOrder(e).then(res => {
				uni.showToast({
					title: '抢单成功',
					duration: 2000
				});
				uni.switchTab({
					url: '../index/index?type=2'
				});
			});
		},
		navToIndex() {
			uni.switchTab({
				url: '../index/index'
			});
		}
	}
};
</script>

<style lang="less" scoped>
.order {
	color: #fff;
	padding-bottom: 50rpx;
	.msg {
		position: relative;
		z-index: 9;
		overflow: hidden;
		padding: 0 40rpx;
		height: 160rpx;
		line-height: 160rpx;
		background: linear-gradient(135deg, #7692bb 0%, #425985 100%);
		.type {
			font-size: 48rpx;
			image {
				float: right;
				width: 64rpx;
				height: 64rpx;
				margin-top: 59rpx;
			}
		}
		.bg1 {
			position: absolute;
			z-index: -1;
			top: -100rpx;
			right: 0;
			width: 250rpx;
			height: 561rpx;
			background: linear-gradient(180deg, #fce270 0%, #ffaa00 100%);
			border-top-left-radius: 500rpx;
			border-bottom-left-radius: 10rpx;
		}
		.bg2 {
			position: absolute;
			z-index: -2;
			top: -50rpx;
			right: 50rpx;
			width: 280rpx;
			height: 280rpx;
			background: linear-gradient(135deg, #7692bb 0%, #425985 100%);
			opacity: 0.7;
			border-radius: 50%;
		}
	}
	.msglist {
		margin: 30rpx 20rpx 0;
		padding: 40rpx;
		background: linear-gradient(135deg, #7692bb 0%, #425985 100%);
		border-radius: 20rpx;
		.title {
			font-size: 32rpx;
			padding-bottom: 30rpx;
			font-weight: 600;
			color: #ffffff;
			line-height: 45rpx;
			border-bottom: 1px solid #94a1b8;
		}
		.list {
			font-size: 26rpx;
			line-height: 67rpx;
			color: #f6f7f9;
			text {
				float: right;
			}
			.golden {
				color: #ffe471;
			}
			input {
				margin-top: 20rpx;
				font-size: 26rpx;
			}
			.imglist{
				overflow: hidden;
				.listimg {
					position: relative;
					float: left;
					background: #fff;
					width: 305rpx;
					// height: 265rpx;
					color: #ffffff;
					margin-bottom: 20rpx;
					image {
						width: 305rpx;
						height: 196rpx;
						display: block;
					}
					.text {
						width: 305rpx;
						height: 69rpx;
						background: #425985;
						text-align: center;
						font-size: 28rpx;
						font-weight: 500;
						line-height: 69rpx;
					}
				}
				.listimg:nth-child(2n) {
					margin-left: 20rpx;
				}
			}
		}
		.pack {
			font-size: 26rpx;
			text-align: center;
			color: #ffe471;
		}
	}
	.code {
		text-align: center;
		image {
			width: 220rpx;
			height: 220rpx;
			margin: 39rpx 0 20rpx;
		}
		.tip {
			font-size: 22rpx;
		}
	}
	.botton {
		margin: 30rpx 20rpx 0;
		.grab {
			text-align: center;
			line-height: 100rpx;
			border: 1px solid #ffff;
			border-radius: 20rpx;
		}
	}
}
</style>
